<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户中心-身份验证</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/comm.css" />
		<style type="text/css">
			@media (min-width:769px ) {
			html{height: 100%;}
			body{height: 100%;}
			.box_height{height: 100%;}
		} 	@media (min-height:1024px ) {
			html{height: 100%;}
			body{height: 100%;}
			.box_height{height: 100%;}
		} 
		</style>
	</head>
	<body>
			<div class="container-fluid box_height" style="background-color: #434273;">
			<div class="fakeloader"></div>
			<div class="row hao " style="background-color: #383961;">
				<div class="hao_div">
					<div class="col-lg-5 col-md-5 col-xs-5 col-sm-5 animated slideInDown" style="padding: 0;">
						<div class="logo_ck" style="padding-left: 10px;">
							<img class="logo" src="img/logo.png" /><span class="ck"> CK</span>
						</div>
					</div>
					<div class="col-lg-7 col-md-7 col-xs-7 col-sm-7 caid animated slideInDown"><img id="caid" src="img/cai.png" /></div>
					<div class="col-lg-7 col-md-7 caid1 animated slideInDown dhl_dh" style="height: 60px;">
						<ul class="dtlul" style="color: #fff;">
							<li class="shybj">
								<a href="index.html" >首页</a>
							</li>
							<li id="dhl">
								<a href="core.html">交易中心</a>
							</li>
							<li id="dhl1">
								<a href="entrust.html" >委托</a>
							</li>
							
							<li id="dhl2">
								<a href="user.html" style="color: #d51e87;">用户中心</a>
							</li>
							<li id="dhl3">
								<a href="news.html">资讯</a>
							</li>
							<li id="switch" class="switch1"><span class="yuy">简体 </span> <span class="xiab">﹀</span>
								<div class="switch">					
									<input id="ft" type="button" value="繁体" onclick="zh_tran('t');" />
									<input id="jt" type="button" value="简体" onclick="zh_tran('s');" />
									<input id="yw" type="button" value="English" />
								</div>
							</li>
							<li id="dhl4">
								<div class="tx_div"><img src="img/txiang.png"/></div>
								<a href="">账号名</a>
							</li>
						</ul>
					</div>
					<div class="heip">
						<div class="text-right">
							<div class="dax"><img style="width: 30px" src="img/xx1.png" /></div>
						</div>
					</div>
					<div class="show_dhl">
						<ul class="dtlu2">
							<li class="shybj">
								<a href="index.html">首&nbsp;&nbsp;&nbsp;页</a>
							</li>
							<li id="dhl" class="shybj">
								<a href="core.html">交易中心</a>
							</li>
							<li id="dhl1" class="shybj">
								<a href="entrust.html">委托管理</a>
							</li>
							
							<li id="dhl2" class="shybj">
								<a href="user.html">用户中心</a>
							</li>
							<li id="dhl3" class="shybj">
								<a href="news.html">资&nbsp;&nbsp;&nbsp;讯</a>
							</li>
							<li class="shybj"><span id="switch1">简体 <span class="xiab">﹀</span></span>

							</li>
							<li class="shybj" id="dhl4">
								
								<a href="">账号名</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="container-fluid" style="max-width: 1058px;">
				<div class="row">
					<div class="col-lg-12 col-xs-12 col-md-12 col-sm-12" style="padding: 0;background-color: #4c4c7b;">
						<div style="padding: 12px 0px;background-color: #4c4c7b;">
							<div class="xiasid" style="border-bottom: 1px solid #555480;">
								
								<div class="option_box op_div">
									
									<div><a class="cor" href="user.html">个人财务</a></div>
									<div style="border-bottom: 2px solid #ab2984;"><a class="cor tihs" href="identity.html">身份验证</a></div>
									<div><a class="cor" href="security.html">安全验证</a></div>
									<div><a class="cor"  href="verification.html">登录密码</a></div>
								</div>
							</div>
							
							<div style="color: #eaeaef;" class="div_total">
								<div>
									<div class="jmm_box">
										<span class="jmm jmm30">国家/地区</span>
										<select class="jmm_sele jmm64" name="pp">
											<option>身份证</option>
											<option>嗯咯</option>
										</select>									
									</div>
									
									<!--<div class="gjia">
										<ul>
											<li>中国</li>
											<li>香港</li>
											<li>台湾</li>
										</ul>
									</div>-->
									
								</div>								
							</div>
							<br />
							<div style="color: #eaeaef;" class="div_total">
								<div>
									<div class="jmm_box">
										<span class="jmm jmm30">证件类型</span>
										<select class="jmm_sele jmm64" name="pp">
											<option>身份证</option>
											<option>嗯咯</option>
										</select>
									</div>							
									</div>
									<!--<div class="gjia1">
										<ul>
											<li>身份证</li>
											<li>护照证</li>
											<li>居住证</li>
										</ul>
									</div>-->
								</div>								
							</div>
							<br />
							<div style="color: #eaeaef;" class="div_total">
								<div>
									<div class="jmm_box">
										<span class="jmm jmm30">姓名</span>
										<input   onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"  class="jmm_inp jmm64" type="text" name="" value="" placeholder="请输入姓名" />									
									</div>
								</div>								
							</div>
							<br />
							<div style="color: #eaeaef;" class="div_total">
								<div>
									<div class="jmm_box">
										<span class="jmm jmm30">证件号码</span>
										<input onkeyup="value=this.value.replace(/\D+/g,'')" class="jmm_inp jmm64" type="text" name=""  value="" placeholder="请输入证件号码" />
										
									</div>
								</div>								
							</div>
							<br />
							<div>
								<div class="jao">
									<img src="img/jgo.png"/> <span style="padding-left: 5px;">请上传本人证件，确保图片清晰，四角完整</span>
								</div>		
								<div class="zhj">
									<div class="zhj_h">
										<div class="item">
									        <svg class="icon addImg" aria-hidden="true">
									        	<img class="zhj1" src="img/zhj1.png"/>
									        <use xlink:href="#icon-tianjiatupian"></use>
									      </svg>
									        <input name="url" type="file" class="upload_input" onChange="preview(this)">
									        <div class="preview"></div>
									        <div class="click" onClick="loadImg(this)"></div>
									        <div class="delete" onClick="deleteImg(this)">
									        <svg class="icon" aria-hidden="true">
									            <use xlink:href="#icon-shanchu4"></use>
									          </svg>
									      </div>
									    </div>
									</div>
									
									
									
									<div class="zhj_h">
										<div class="item">
									        <svg class="icon addImg" aria-hidden="true">
									        	<img class="zhj2" src="img/zhj2.png"/>
									        <use xlink:href="#icon-tianjiatupian"></use>
									      </svg>
									        <input name="url" type="file" class="upload_input" onChange="preview(this)">
									        <div class="preview"></div>
									        <div class="click" onClick="loadImg(this)">
									        	
									        </div>
									        <div class="delete" onClick="deleteImg(this)">
									        <svg class="icon" aria-hidden="true">
									            <use xlink:href="#icon-shanchu4"></use>
									          </svg>
									      </div>
									    </div>
									</div>
								</div>
							</div>
							
							
							<br />
							<div class="tjdvi">
								<a class="tja" href=""><button class="btn_yj">提交</button></a>
							</div>
							
							
						</div>
					</div>
				</div>
			</div>
			<!--尾部-->
			<!--<div class="liao">
				<img src="img/liao.png" />
			</div>

			<div class="row text-center hei">
				<div>
					Copyright © 2015-2018 ALL Rights Reserved..粵ICP备16082210号-3
				</div>
			</div>-->		
			
		</div>
		
		
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		
		<script src="js/font.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/jquery-1.11.0.min.js"></script>
		
		<script src="js/fakeLoader.min.js"></script>
		
		<script src="test/lib/esl.js"></script>
		<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/svg.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		  //选择图片
		  var loadImg = function(obj){
		    $(obj).parent().find(".upload_input").click();
		  }
		  //删除
		  var deleteImg = function(obj){
		    $(obj).parent().find('input').val('');
		    $(obj).parent().find('.preview').html('');
		    $(obj).hide();
		  }
		</script> 

<!-- 预览 --> 
		<script type="text/javascript">
		function preview(file) {
		  var prevDiv = $(file).parent().find('.preview');
		  if (file.files && file.files[0]) {
		    var reader = new FileReader();
		    reader.onload = function(evt) {
		      prevDiv.html('<img src="' + evt.target.result + '" />');
		    }
		    reader.readAsDataURL(file.files[0]);
		  } else {//IE
		    prevDiv.html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
		  }
		  $(file).parent().find('.delete').show();
		}
		</script>
				
				
		<style type="text/css">
		section {
			width: 1200px;
			margin: 200px auto;
		}
		article {
			border: 1px solid #ccc;
			padding: 20px;
		}
		
		.icon {
			width: 2em;
			height: 2em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}
		.item {
			float: left;
			position: relative;
			margin: 20px;
		}
		.addImg {
			/*background-image: url(img/zhj1.png);*/
			width: 230px;
			height: 190px;
		}
		.upload_input {
			display: none !important;
		}
		.preview {
			position: absolute;
			width: 230px;
			height: 147px;
			left: 0;
			top: 0;
		}
		.click {
			
			position: absolute;
			width: 230px;
			height: 147px;
			left: 0;
			top: 0;
			z-index: 1;
			cursor: pointer;
		}
		.delete {
			position: absolute;
			right: -2rem;
			top: -1rem;
			cursor: pointer;
			display: none;
		}
		.preview img {
			width: 100%;
			height: 100%;
		}
		.zhj1{position: absolute; left: 0px;}
		.zhj2{position: absolute;left: 0;}
		.tjdvi{padding-left: 52px; position: relative; top: -36px;}
		</style>
	</body>
</html>